import React, { useEffect } from 'react';
import { useDispatch, useSelector, useHistory, useLocation } from 'umi';
import './ImgDetail.less';
const ImgDetaile: React.FC = () => {
  const dispatch = useDispatch();
  const location: any = useLocation();
  const history = useHistory();
  //利用 umi的数据管理dva的方法useSelector 拿到数据
  const { IMdes } = useSelector((model) => {
    return { ...model.user };
  });
  //派发dispatch
  useEffect(() => {
    dispatch({
      type: 'user/IMgDetaile',
      payload: location.state,
    });
  }, []);
  //点击颜色跳入详情
  function colorDeta() {
    history.push({
      pathname: '/colorDetaile',
      state: location.state,
    });
  }
  return (
    <div className="car-img">
      <div className="tit">
        <p>
          <span
            onClick={() => {
              colorDeta();
            }}
          >
            颜色
          </span>
        </p>
        <p>
          <span>车款</span>
        </p>
      </div>
      <div className="flex-row-img">
        {IMdes &&
          IMdes?.map((item: any, index: number) => {
            return (
              <div>
                {item?.List?.map((value: any, index: number) => {
                  return (
                    <h2>
                      <img src={value.Url.replace('{0}', '1')} alt="" />
                    </h2>
                  );
                })}
                <p className="p">
                  <span>{item?.Name}</span>
                  <span>{item?.Count}王</span>
                </p>
              </div>
            );
          })}
      </div>
    </div>
  );
};
export default ImgDetaile;
